{{/* Hugo Blox: CTA Card */}}
{{/* Documentation: https://hugoblox.com/blocks/ */}}
{{/* License: https://github.com/HugoBlox/hugo-blox-builder/blob/main/LICENSE.md */}}

{{/* Initialise */}}
{{ $page := .wcPage }}
{{ $block := .wcBlock }}

{{ $title := $block.content.title | emojify | $page.RenderString }}
{{ $text := $block.content.text | emojify | $page.RenderString | safeHTML }}
{{ $card_class := $block.design.card.css_class }}
{{ $card_style := $block.design.card.css_style }}


<div class="{{with $card_class}}{{.}}{{else}}bg-black{{end}} p-8 md:px-20 md:py-20 mx-auto max-w-5xl rounded-lg flex flex-col items-center text-center"
     {{with $card_style}}style="{{. | safeCSS}}"{{end}}>
  <h2 class="text-white text-4xl md:text-6xl tracking-tight">
    {{ $title }}
  </h2>
  <div class="text-gray-100 mt-4 text-lg md:text-xl prose">
    {{ $text }}
  </div>
  {{ with $block.content.button }}
  <div class="flex mt-5">
    <a href="{{.url}}" class="rounded text-center transition focus-visible:ring-2 ring-offset-2 ring-gray-200 px-5 py-2.5 bg-white hover:bg-gray-300 text-black border-2 border-transparent">
      {{.text}}
    </a>
  </div>
  {{ end }}
</div>
